<template>
  <div class="songList" @click="toSongSheet()">
    <img :src="imgUrl" />
    <span>{{ label }}</span>
    <div class="icon"><i class="iconfont icon-bofang"></i></div>
    <div class="user" v-show="author">
      <span><i class="iconfont icon-user"></i>{{author}}</span>
    </div>
    <div class="playcount">
      <i class="iconfont icon-24gl-play"></i>
      <span>{{ count }}</span>
    </div>
  </div>
</template>

<script>
import {getSheetListAPI} from "@/api/index"
export default {
  name: "SongListItem",
  props: ["imgUrl", "playCount", "listID", "label",'author'],
  computed: {
    count() {
      if (this.playCount > 10000) {
        if(this.playCount > 100000000){
          return Math.floor(this.playCount / 100000000) + '亿'
        }
        return Math.floor(this.playCount / 10000) + "万";
      } else {
        return this.playCount;
      }
    },
  },
  methods:{
    toSongSheet(){
      this.$router.push({
        name:'songsheet',
        query:{
          id:this.listID
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.songList {
  height: 180px;
  width: 130px;
  margin-bottom: 10px;
  position: relative;
  .icon {
    display: none;
    position: absolute;
    right: 5px;
    bottom: 58px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    i {
      display: block;
      margin-top: 7px;
      margin-left: 8px;
      color: #ff7a9e;
    }
  }

  .playcount {
    position: absolute;
    top: -5px;
    right: 5px;
    color: white;
    i {
      font-size: 12px;
    }
    span {
      font-size: 12px;
      display: inline;
    }
  }
  .user {
    width: 100px;
    position: absolute;
    bottom: 52px;
    left: 5px;
    color: white;
    i {
      font-size: 12px;
    }
    span {
      font-size: 10px;
      display: inline;
      word-break: break-all;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }
  }
  span {
    font-weight: lighter;
    font-size: 15px;
    word-break: break-all;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    cursor: pointer;
  }
  img {
    width: 130px;
    height: 130px;
    border-radius: 4px;
    cursor: pointer;
  }
}
.songList:hover .icon {
  display: block;
}
</style>